<template>
  <div class="nc-body" id="detail-middle">
    <div class="title">
      角色档案
    </div>
    <div class="nc-main-introduce" ref="ncMainIntroduce">
      <!--              选项式内容（待开发）-->
      <!--              左边有浅主题色填充： 文本描述-->
      <!--              具体参考百度百科-->
      <div class="content">

        <div class="content-item-box">
          <div class="item-module" v-for="(item, index) in items" :key="item.id">
            <span @click="removeItem(item.id)" class="close-btn">×</span>
            <input type="text" class="input1" v-model="item.keyDes" placeholder="输入框1" @change="updateItem(item)">
            <input type="text" class="input2" v-model="item.valueDes" placeholder="输入框2" @change="updateItem(item)">
          </div>
        </div>

        <button class="content-add-button" @click="addItem">增加信息项</button>
      </div>

      <div class="statistics">
        <!--              弹出一个窗口，进行-->
        <!--        <div class="statistics-item">-->
        <!--          &lt;!&ndash;                <RadarChart :height =300 :width=300 ></RadarChart>&ndash;&gt;-->
        <!--          <RadarChart :master-id="props.id" :six-point-data="sixPointData">-->
        <!--          </RadarChart>-->
        <!--          <Circle :sonValue="sonValue"></Circle>-->
        <!--          <el-button style="position: absolute;right: 0;top: 0;" @click="addStistics('xx')">编辑</el-button>-->
        <!--        </div>-->
        <div class="statistics-item" v-for="(item, index) in statics" :key="item.id">


          <div v-if="item.ext === 'point'" style="position: relative;">
          <RadarChart v-if="item.ext === 'point'" :master-id="props.id"
                      :six-point-data="getStaticsData(item.ext,item.dataJson)">
          </RadarChart>
            <div style="position: absolute;right: 0;top: 0;">
              <el-button  @click="addStistics(item?.id)"  style="margin-bottom: 5px; padding: 4px 4px; font-size: 12px;">编辑</el-button>
              <el-button  @click="deleteStatic(item?.id)"  style="margin-bottom: 5px; padding: 4px 4px; font-size: 12px;">删除</el-button>
            </div>
          </div>


          <div v-if="item.ext === 'circle'" style="position: relative;">
            <Circle  :son-value="getStaticsData(item.ext,item.dataJson)">
            </Circle>

            <div style="position: absolute;right: 0;top: 0;">
              <el-button  @click="addStistics(item?.id)"  style="margin-bottom: 5px; padding: 4px 4px; font-size: 12px;">编辑</el-button>
              <el-button  @click="deleteStatic(item?.id)"  style="margin-bottom: 5px; padding: 4px 4px; font-size: 12px;">删除</el-button>
            </div>
          </div>
        </div>

        <button class="statistics-add-button" @click="addStistics('null')">统计图/六角图</button>
      </div>
    </div>

    <StatisticsDialog ref="staDialog" :master-id="props.id" @refresh-middle="refashArche"></StatisticsDialog>
  </div>
</template>

<script setup lang="ts">

import Circle from "@/views/novel/character/components/middle/statistics/Circle.vue";
import RadarChart from "@/views/novel/character/components/middle/statistics/SixPoint.vue";
import StatisticsDialog from "@/views/novel/character/components/middle/statistics/StatisticsDialog.vue";
import {ref} from "vue";
import type {CircleDataInter} from "@/type/novel/circle";
import {
  createDetailModeArchiveApi,
  getDetailModeArchiveListApi,
  updateDetailModeArchiveApi
} from "@/api/modules/detailModel/detailModeArchive";
import type {DetailModeArchiveForm} from "@/api/types/detailmodel/detailModeArchive";
import {ElMessage} from "element-plus";
import {getDetailModePictureListApi} from "@/api/modules/detailModel/detailModePicture";
import type {SixPointProps} from "@/api/types/novel/detailMode";
import {getPowerPointDetailApi, getPowerPointListApi, removePowerPointApi} from "@/api/modules/statistics/powerPoint";
import type {PowerPointForm, PowerPointQuery} from "@/api/types/statistics/powerPoint";

let props = defineProps({
  id: Number,
  mode: String
})


// let items = ref<[{ id: number, belongId: number, keyDes: '', valueDes: '' }]>([]);
let items = ref<[DetailModeArchiveForm]>([]);
let statics = ref<[PowerPointForm]>([]);

let staDialog = ref()
//圆型
let sonValue = ref<CircleDataInter>({
  labels: ['代码', '游戏', '性', '学习', '沟通'],
  datasets: [
    {
      label: 'Pie Chart Example',
      data: [10, 20, 30, 30, 10], // 数据值 总数值为100
      backgroundColor: ['#FFCC99', '#99CCFF', '#FFFF99', '#FF99CC', '#CCFF99']
    }
  ],
  options: []
})

let sixPointData = ref<SixPointProps>({
  values: [3, 4, 5, 2, 4, 3],
  indicator: [
    { name: '速度', max: 5 },
    { name: '力量', max: 5 },
    { name: '反应', max: 5 },
    { name: '耐力', max: 5 },
    { name: '智力', max: 5 },
    { name: '生存', max: 5 },
  ],
  title:'能力雷达图',
  options: []
})


const removeItem = (id: any) => {
  items.value = items.value.filter(item => item.id !== id);
};


/**
 * 添加统计图
 */
let addStistics = (id :any) => {
    return  staDialog.value.openStaticDialog(id)
};

/**
 * 删除统计图
 */
let deleteStatic = (id :any) => {

  removePowerPointApi({ids:[id]}).then((res) => {
     ElMessage.success('删除成功')
     refashArche()
  })
};


/**
 * 主介绍选项式按钮添加功能
 */
let addItem = () => {
  //先保存空选项
  let newNode: DetailModeArchiveForm = {
    belongId: props.id
  }
  createDetailModeArchiveApi(newNode).then((res) => {
    const id = res?.data?.id;
    const belongId = res?.data?.belongId;
    items.value.push({id, belongId, keyDes: '', valueDes: ''});
    ElMessage.success('新增成功')
  })

};

/**
 * 更新
 */
let updateItem = (item: any) => {
  updateDetailModeArchiveApi(item).then((res) => {
    ElMessage.success('保存成功')
  })
}

let getStaticsData = (type :string ,staticModel :any) =>{
  let data = JSON.parse(staticModel)
  if (type === 'circle'){
    return data?.circle
  }
  return data?.point
}

/**
 * 数据获取
 */
let refashArche= ()=>{

  getDetailModeArchiveListApi({ limit: 100,
    belongId: props?.id,
    page: 1 }).then((res) => {
      items.value = res?.data?.rows
  })


  let query : PowerPointQuery ={
    limit: 100,
    belongId: props?.id,
    page: 1
  }
  getPowerPointListApi(query).then((res) => {
    statics.value = res?.data?.rows
  })

}
refashArche()

</script>


<style scoped lang="scss">

.nc-body {
  position: relative;
  width: 100%;
  //margin-top: 15px;
  margin-top: 15px;
  //top: 30px;  /*不被计算*/
  background-color: rgba(255, 255, 255, 0.3);

  .title {
    color: black;
    font-size: 34px;
    text-align: center;
    justify-content: center;
    background-color: rgba(255, 192, 203, 0.3);
  }

  .nc-main-introduce {
    position: relative;
    display: flex; /* 设置为 Flex 容器 */
    min-height: 410px;
    border: 4px solid rgba(255, 192, 203, 0.5); /* 红色实线边框 */
    //margin-right: 10px;

    //左
    .content {
      position: relative;
      color: black;
      margin: 0;
      width: 70%;
      background-color: rgba(150, 255, 255, 0.1);
      //justify-content: left; //水平居中
      //align-items: center; /* 垂直方向居中 */

      .content-item-box {
        //justify-content: flex-start; //水平居中
        display: flex;
        flex-wrap: wrap; //若水平布局不足则自动换行
        position: relative;
        gap: 15px; /* 模块间距 */
        .item-module {
          //貌似要把宽度写死才好兼容
          //display: flex;
          //width: 48%; /* 根据需要调整宽度 */
          //margin: 1%;
          ////box-sizing: border-box;
          //border: 1px solid #ccc;
          //padding: 10px;
          position: relative;
          display: flex;
          width: calc(50% - 8px); /* 减去gap的一半 */
          padding: 15px;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          box-sizing: border-box;

          .input1 {
            width: 20%;
            color: black;
            margin: 0 18px 0 0;
            padding: 7px 0;
            background-color: rgba(255, 255, 255, 0.1);
            border: 3px solid rgba(0, 0, 0, 0.5); /* 修正后的边框 */
            border-radius: 3px; /* 可选：添加圆角 */
          }

          .input2 {
            color: black;
            width: 70%;
            background-color: rgba(0, 0, 0, 0.1);
          }

          .close-btn {
            cursor: pointer;
          }
        }
      }

      .content-add-button {
        height: auto;
        position: relative;
        //left: 0;
        //bottom: 0;
      }
    }

    //右
    .statistics {
      display: flex;
      position: relative;
      color: black;
      //margin-left: 3px;
      width: 30%;
      border: 0;
      //background-color: rgba(255, 150, 255, 0.8);
      justify-content: center;
      align-items: center;
      flex-wrap: wrap; //若水平布局不足则自动换行

      .statistics-item {
        margin: 10px;
        width: 100%;
        //transform: scale(0.7);  /* 进行缩放 */
      }

      .statistics-add-button {
        position: relative;
        height: auto;
      }
    }

  }

  //.nc-pictures {
  //  box-shadow: rgb(255, 255, 255) 0 2px 10px 2px;
  //  width: 30%;
  //  background-color: rgba(255, 200, 255, 0.8);
  //  aspect-ratio: 3 / 2;
  //  background-size: cover; /* 背景图片完全适应容器 */
  //  background-position: center; /* 背景居中显示 */
  //}
}
</style>